<template>
  <div class="v2ex-list">
    <div class="v2ex-item" v-for="content in contentData">
      <table>
        <tbody>
          <tr>
            <td width="2" valign="top" align="center"></td>
            <td width="48" valign="top" align="center">
              <img class="item-avatar" :src="content.member.avatar_normal" />
            </td>
            <td width="7" valign="top" align="center"></td>
            <td width="auto" valign="middle">
              <span class="item-title" @click="openContentDetail(content)">
                <a>{{content.title}}</a>
              </span>
              <div class="hr"></div>
              <span>
                <a class="item-node-title">{{content.node.title}}</a>
                &nbsp;  •  &nbsp;
                <strong>
                  <a>{{content.node.name}}</a>
                </strong>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  export default{
    name : 'v2ex-list',
    props : {
      contentData : Array
    },
    methods : {
      openContentDetail : function (data) {
        this.$emit('openContentDetail',data)
      }
    }
  }
</script>

<style scoped>
  .v2ex-item{
    border-bottom: 1px solid #e2e2e2;
    padding: 5px;
  }
  .item-avatar{
    border-radius: 7px;
  }
  .item-title{
    cursor: pointer;
    color: #778087;
    text-decoration: none;
    word-break: break-all;
  }
  .item-node-title{
    background-color: #f5f5f5;
    font-size: 10px;
    line-height: 10px;
    display: inline-block;
    padding: 4px 4px 4px 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-decoration: none;
    color: #999;
  }
  .hr{
    height: 5px;
  }
</style>
